{% extends "doctor_base.html" %}
{% block title %}
个人中心
{% endblock %}

{% block subtitle %}
个人中心
{% endblock %}


{% block main %}个人中心{% endblock %}

{% block content %}



<!--表格健康档案-->
<section class="section profile">
  <div class="row">


    <div class="col-xl-4">

      <div class="card">
        <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">

          <img src="{{user.profile}}" alt="Profile" class="rounded-circle">
          <h2>{{user.doctor_name}}</h2>
          <h3>{{user.email}}</h3>

        </div>
      </div>
    </div>
    <!-- </div> -->
    <!--            头像结束-->

    <div class="col-lg-8">

      <div class="card">
        <div class="card-body pt-3">
          <!-- Bordered Tabs -->
          <ul class="nav nav-tabs nav-tabs-bordered">

            <li class="nav-item">
              <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">信息</button>
            </li>



            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">编辑</button>
            </li>

          </ul>
          <div class="tab-content pt-2">

            <div class="tab-pane fade show active profile-overview" id="profile-overview">
              <!--                  <h5 class="card-title">About</h5>-->
              <!--                  <p class="small fst-italic">Sunt est soluta temporibus accusantium neque nam maiores cumque temporibus. Tempora libero non est unde veniam est qui dolor. Ut sunt iure rerum quae quisquam autem eveniet perspiciatis odit. Fuga sequi sed ea saepe at unde.</p>-->

              <h5 class="card-title">个人基本信息</h5>


              <div class="row">
                <div class="col-lg-3 col-md-4 label ">姓名</div>
                <div class="col-lg-9 col-md-8">{{user.doctor_name}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">性别</div>
                <div class="col-lg-9 col-md-8">{{user.doctor_sex}}</div>
              </div>


              <div class="row">
                <div class="col-lg-3 col-md-4 label">年龄</div>
                <div class="col-lg-9 col-md-8">{{user.doctor_age}}</div>
              </div>


              <div class="row">
                <div class="col-lg-3 col-md-4 label">邮箱</div>
                <div class="col-lg-9 col-md-8">{{user.email}}</div>
              </div>



              <div class="row">
                <div class="col-lg-3 col-md-4 label">所属科室</div>
                <div class="col-lg-9 col-md-8">{{user.deid.d_name}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">所属医院</div>
                <div class="col-lg-9 col-md-8">{{user.hospital}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">擅长领域</div>
                <div class="col-lg-9 col-md-8">{{user.good_at}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">职称</div>
                <div class="col-lg-9 col-md-8">{{user.title}}</div>
              </div>

            </div>



            <div class="tab-pane fade pt-3" id="profile-change-password">
              <!-- Profile Edit Form -->
              <form method="post" action="{% url 'DoctorApp:doctor_index' %}">
                {% csrf_token %}
                <div class="row mb-3">
                  <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">头像</label>
                  <div class="col-md-8 col-lg-9">
                    <span>点击头像修改</span>
                    <img src="{{user.profile}}" alt="Profile" width="120" height="120" id="Profile"
                      onclick="$(this).next().click();" onerror="this.src='/static/img/profile-img.jpg' ">
                    <input style="display: none;" type="file" name="profile" id="inprofile" onchange="inputFile(this)"
                      accept="image/*">
                    <input type="hidden" name="profile1" id="profile1">
                    <script>
                      function inputFile(obj) {
                        const file = obj.files[0]
                        var reader = new FileReader();
                        reader.readAsDataURL(file)
                        reader.onload = function () {
                          $("#Profile").attr("src", this.result);
                          // console.log(this.result)
                          $("#profile1").val($("#Profile").attr("src"))
                          // $("test").val(this.result)
                          
                        }

                      }
                    </script>


                  </div>
                </div>

                <div class="row mb-3">
                  <label for="doctor_name" class="col-md-4 col-lg-3 col-form-label">姓名</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="doctor_name" type="text" class="form-control" id="doctor_name"
                      value="{{user.doctor_name}}">
                  </div>
                </div>


                <div class="row mb-3">
                  <label for="doctor_sex" class="col-md-4 col-lg-3 col-form-label">性别</label>
                  <div class="col-md-8 col-lg-9">
                    <select id="doctor_sex" class="form-select" name="doctor_sex">
                      {% if user.doctor_sex == '男' %}
                      <option selected>男</option>
                      <option>女</option>
                      {% else %}
                      <option>男</option>
                      <option selected>女</option>
                      {% endif %}
                    </select>

                  </div>
                </div>

                <div class="row mb-3">
                  <label for="doctor_age" class="col-md-4 col-lg-3 col-form-label">年龄</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="doctor_age" type="text" class="form-control" id="doctor_age"
                      value="{{user.doctor_age}}">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="email" class="col-md-4 col-lg-3 col-form-label">邮箱</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="email" type="email" class="form-control" id="email" value="{{user.email}}">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="deid" class="col-md-4 col-lg-3 col-form-label">所属科室</label>
                  <div class="col-md-8 col-lg-9">
                    <select class="form-select" aria-label="Default select example" id="deid" name="deid">
                      <!-- <option selected=""></option> -->
                      {% for d in departments %}
                      {% if d.id == user.deid %}
                      <option value={{d.id}} selected>{{d.d_name}}</option>
                      {% else %}
                      <option value={{d.id}}>{{d.d_name}}</option>
                      {% endif %}

                      {% endfor %}
                    </select>

                  </div>
                </div>

                <div class="row mb-3">
                  <label for="hospital" class="col-md-4 col-lg-3 col-form-label">所属医院</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="hospital" type="text" class="form-control" id="hospital" value="{{user.hospital}}">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="good_at" class="col-md-4 col-lg-3 col-form-label">擅长领域</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="good_at" type="text" class="form-control" id="good_at" value="{{user.good_at}}">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="title" class="col-md-4 col-lg-3 col-form-label">职称</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="title" type="text" class="form-control" id="title" value="{{user.title}}">
                  </div>
                </div>




                <div class="text-center">
                  <button type="submit" class="btn btn-primary">保存</button>
                </div>
              </form><!-- End Profile Edit Form -->

            </div>

          </div><!-- End Bordered Tabs -->

        </div>
      </div>

    </div>
  </div>
</section>
{% endblock %}